<template>
  <div id="app">
    <a-layout class="layout">
      <a-layout-header>
        <div  :style="{width:'1200px', margin:'0 auto'}">
          <div class="site-logo"> <img src="./assets/logo-yj.png"/></div>
          <SiteMenu />
        </div>
        
      </a-layout-header>

      <a-layout-content :style="{ padding: '24px', minHeight: '500px', margin:'0 auto'}">
          <!-- 路由渲染 -->
          <router-view :style="{ display: 'block' }"></router-view>
          <!-- 子应用渲染dom，id跟main.js中的container相对应 -->
          <div id="micro_container"></div>
      </a-layout-content>

      <a-layout-footer style="text-align: center">
          <SiteFooter />

      </a-layout-footer>
    </a-layout>
    
    
  </div>
  
</template>

<script>
import SiteMenu from "./views/common/SiteMenu.vue";
import SiteFooter from './views/common/SiteFooter.vue';

export default {
  name: "App",
  components: {
    SiteMenu,
    SiteFooter,
  },
};
</script>

<style>

#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  
}
.site-logo {
  height: 40px;
  float: left;
}
.site-logo img{
  height: 40px;
}
#micro_container{
  width: 1200px;
  background: '#fff';
}
</style>
